<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 通用的工具栏PageTools -->
      <PageTools>
        <template #left> <span v-color>总记录数: {{ total }}条</span> </template>
        <template #right>
          <el-button size="small" type="warning" @click="$router.push('/import?name=employees')">excel导入</el-button>
          <el-button size="small" type="danger" @click="handleDownload">excel导出</el-button>
          <el-button size="small" type="primary" @click="dialogVisible = true">新增员工</el-button>
        </template>
      </PageTools>
      <el-card style="margin: 20px 0">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
        >
          <el-table-column label="序号" type="index" :index="indexMehod" sortable="" width="100" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="头像" sortable="">
            <template #default="{row}">
              <img
                v-imgerror
                :src="row.staffPhoto || 'xxx'"
                style="width: 130px; height: 130px; border-radius: 50%"
                @click="showUrlCode(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <!-- <el-table-column label="聘用形式" prop="formOfEmployment" sortable="">
            <template #default="{row}">
              {{ row.formOfEmployment === 1 ? '正式' : '临时工' }}
            </template>
          </el-table-column> -->
          <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="formatterMethod" sortable="" />
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" sortable="">
            <template #default="{row}">
              {{ fmDate(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column label="转正日期" sortable="">
            <template #default="{row}">
              {{ fmDate(row.correctionTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="showRoleDialog(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delEmployee(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          style="margin-top: 20px"
          background
          :current-page="page"
          :page-sizes="[2, 4, 6, 10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 新增员工的子组件 -->
        <add-employee
          :dialog-visible.sync="dialogVisible"
          @reload="getEmployeesList"
        />
      </el-card>
      <!-- 展示二维码 -->
      <el-dialog
        title="二维码"
        :visible.sync="showCodeVisible"
        width="15%"
        @close="showCodeVisible = false"
      >
        <!-- 二维码的容器 vue在更新dom的时候是 异步的 -->
        <div style="text-align:center">
          <canvas ref="codeBox" />
        </div>
      </el-dialog>

      <!-- 分配角色的对话框 -->
      <assign-role :assign-id="assignId" :show-roles-visible.sync="showRolesVisible" />
    </div>
  </div>
</template>

<script>
import { reqDelEmployee, reqGetEmployeesList } from '@/api/employees'
import employeesMenu from '@/api/constant/employees.js'
import AddEmployee from './components/AddEmployee.vue'
import { formatDate } from '@/utils/index'
import qrcode from 'qrcode'
import AssignRole from './components/AssignRole.vue'
// console.log(employeesMenu.hireType)
export default {
  name: 'Employees',
  components: { AddEmployee, AssignRole },
  data() {
    return {
      tableData: [], // 员工列表
      total: 0, // 总数
      page: 1, // 页码
      size: 2, // 每页条数
      dialogVisible: false, // 新增员工对话框控制的布尔值
      showCodeVisible: false, // 展示头像二维码的布尔值
      showRolesVisible: false, // 分配角色对话框的布尔值的布尔值
      assignId: ''
    }
  },
  created() {
    this.getEmployeesList()
  },
  methods: {
    // 获取员工列表
    async getEmployeesList() {
      const { data: { rows, total }} = await reqGetEmployeesList(this.page, this.size)
      this.total = total
      this.tableData = rows
    },
    // 每页条数发生变化
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.getEmployeesList()
    },
    // 页码发生变化
    handleCurrentChange(val) {
      this.page = val
      this.getEmployeesList()
    },
    // 自定义索引列
    indexMehod(index) {
      return index + (this.page - 1) * this.size + 1
    },
    // 聘用形式列格式化列的内容
    // row 当前行的内容
    // column 当前列的内容
    // cellValue 当前列的单元格的值
    // index索引
    formatterMethod(row, column, cellValue, index) {
      const o = employeesMenu.hireType.find(item => item.id === +cellValue)
      return o ? o.value : '查询暂无'
    },
    // 格式化时间
    fmDate(time) {
      return formatDate(time) // 调用工具函数
    },
    // 删除员工
    delEmployee(id) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        type: 'warning'
      }).then(async() => {
        // 1. 发送请求
        await reqDelEmployee(id)
        // 3. bug处理
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        // 2. 重新渲染
        this.getEmployeesList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 导出员工列表
    async  handleDownload() {
      // 在点击了导出按钮后import再去加载对应的js模块
      // 导出基本表格演示
      /* import('@/vendor/Export2Excel').then(excel => { // excel是一个对象
        excel.export_json_to_excel({
          header: ['姓名', '年龄', '性别', '住址'], // 表格的标题
          data: [
            ['zs', 18, '男', '北京'],
            ['lisi', 28, '女', '上海']
          ], // 是表格的数据是一个二维数组
          filename: '员工信息表', // 导出的excel文件的名称
          autoWidth: true, // 自适应宽度
          bookType: 'xlsx' // 导出的excel文件扩展名
        })
      }) */
      // 1. 先拿到所有的员工列表
      const { data: { rows }} = await reqGetEmployeesList(1, this.total)
      // console.log(rows) // 所有的员工列表
      const mapRules = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
      const merges = ['A1:A2', 'B1:F1', 'G1:G2']
      const data = this.formatToArray(rows, mapRules)
      import('@/vendor/Export2Excel').then(excel => { // excel是一个对象
        excel.export_json_to_excel({
          multiHeader, // 多表头(复杂表头)
          merges, // 合并配置
          header: Object.keys(mapRules), // 表格的标题
          data, // 是表格的数据是一个二维数组
          filename: '员工信息表', // 导出的excel文件的名称
          autoWidth: true, // 自适应宽度
          bookType: 'xlsx' // 导出的excel文件扩展名
        })
      })
    },
    formatToArray(rows, mapRules) {
      return rows.map(item => { // item是每一个员工对象
        // console.log(item)
        return Object.keys(mapRules).map(value => { // value是标题数组的每一项(字符串)
          // console.log(value) // 中文
          // console.log(mapRules[value]) // 英文
          const englishKey = mapRules[value] // 去对应规则中找到中文对应的英文键
          if (['timeOfEntry', 'correctionTime'].includes(englishKey)) { // 处理日期
            return formatDate(item[englishKey])
          } else if (englishKey === 'formOfEmployment') { // 处理聘用形式
            const o = employeesMenu.hireType.find(obj => obj.id === +item[englishKey])
            return o ? o.value : '暂无'
          } else {
            return item[englishKey] // 将取到的键的值 追加到数组中
          }
        })
      })
    },
    // 点击头像展示二维码
    showUrlCode(url) {
      if (!url) return this.$message.info('不能展示系统默认头像')
      this.showCodeVisible = true
      // qrcode.toCanvas(容器, 信息)
      // 控制对话框元素的布尔值默认是false, 二维码的容器是不会被创建的, 当布尔值更新为true后, dom会更新,但是是异步的,
      this.$nextTick(() => {
        qrcode.toCanvas(this.$refs.codeBox, url)
      })
    },
    // 分配角色展示对话框
    showRoleDialog(id) {
      this.showRolesVisible = true
      this.assignId = id
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  table {
    width: 100% !important
  }
}
</style>
